<template>
  <section class="commonHeaderUtil" >
    <div class="header" v-if="obj.showType == 0" :class="{'changeRed': obj.isRed}">
      <div class="more-icon" @click="headerFn(0)"></div>
      <div class="content" @click="headerFn(1)">
        <div class="search-icon"></div>
        <input class="search-input" disabled="disabled" placeholder="输入搜索的商品" type="text">
      </div>
      <div class="right-icon" @click="headerFn(2)"><span class="login-text">登录</span></div>
    </div>
    <div class="header search-wrap" v-if="obj.showType == 1">
      <div class="more-icon" @click="headerFn(0)"></div>
      <div class="content" @click="headerFn(1)">
        <div class="search-icon"></div>
        <input class="search-input" disabled="disabled" v-model.trim="obj.content" placeholder="输入搜索的商品" type="text">
      </div>
      <div class="right-icon" @click="headerFn(2)"></div>
    </div>
    <div class="header search-wrap" v-if="obj.showType == 2">
      <div class="more-icon" @click="headerFn(0)"></div>
      <div class="content" @click="headerFn(1)">
        <div class="search-icon"></div>
        <input class="search-input" disabled="disabled" v-model.trim="obj.content" placeholder="输入搜索的商品" type="text">
      </div>
      <div class="right-icon" @click="headerFn(2)"></div>
    </div>
    <div class="header group-buy" v-if="obj.showType == 3">
      <div class="more-icon" @click="headerFn(0)"></div>
      <div class="content" @click="headerFn(1)">
       
      </div>
      <div class="right-icon" @click="headerFn(2)"></div>
    </div>
    <div class="header search" v-if="obj.showType == 4">
      <div class="more-icon" @click="headerFn(0)"></div>
      <div class="content" @click="headerFn(1)">
        <div class="search-icon"></div>
        <input class="search-input" v-model.trim="obj.content" placeholder="输入搜索的商品" type="text">
        <div class="close-btn"></div>
      </div>
      <div class="right-icon" @click="headerFn(2)">
        <div class="search-btn">搜索</div>
      </div>
    </div>
    
  </section>
</template>
<script>
export default {
  props: {
    obj: {
      type: Object
    },
  },
  data () {
    return {
      
    }
  },
  methods: {
    headerFn(i) {
      this.$emit("myClick", i);
    }
  },
}

</script>
<style lang="less" scoped>
.commonHeaderUtil {
  .header {
    width: 3.75rem;
    height: .44rem;
    background: rgba(228, 49, 48, 0);
    display: flex;
    padding: 0 .1rem;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    transition: all .4s;
    &.search {
      .more-icon {
        background: url("../../../assets/images/back-icon-1.png") no-repeat center;
      }
      .content {
        background: #f7f7f7;
        display: flex;
        .search-input {
          background: #f7f7f7;
          flex: 1;
        }
        .close-btn {
          width: .18rem;
          height: .18rem;
          background: url("../../../assets/images/jd-sprites.png") no-repeat;
          background-size: 2rem 2rem;
          background-position: -1.02rem .02rem;
        }
      }
      .right-icon {
        width: .5rem;
        justify-content: flex-end;
        .search-btn {
          width: .4rem;
          height: .3rem;
          background: #e93b3d;
          font-size: .14rem;
          border-radius: .04rem;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      
    }
    &.search-wrap {
      background: white;
      border-bottom: .01rem solid #f5f5f5;
      .more-icon {
        background: url("../../../assets/images/back-icon-1.png") no-repeat center;
      }
      .content {
        background: #f7f7f7;
        .search-input {
          background: #f7f7f7;
        }
      }
      .right-icon {
        background: url("../../../assets/images/meun-icon-9.png") no-repeat center;
        background-size: 50%;
      }
    }
    &.group-buy {
      background: white;
      border-bottom: .01rem solid #f5f5f5;
      .more-icon {
        background: url("../../../assets/images/back-icon-1.png") no-repeat center;
      }
    }
    z-index: 101;
    &.changeRed {
      background: rgba(228, 49, 48, 1);
    }
    .more-icon {
      width: .4rem;
      height: .18rem;
      background: url("../../../assets/images/more-icon-1.png") no-repeat center;
      background-size: contain !important;
    }
    .content {
      width: 2.74rem;
      height: .3rem;
      background: white;
      border-radius: .15rem;
      display: flex;
      align-items: center;
      padding: 0 .1rem;
      box-sizing: border-box;
      .search-icon {
        width: .18rem;
        height: .15rem;
        background: url("../../../assets/images/search-icon-1.png") no-repeat center;
        background-size: contain;
        margin-right: .1rem;
      }
      .search-input {
        height: .3rem;
        line-height: .3rem;
        font-size: .14rem;
        color: #3c3c40;
      }
      .search-input::-webkit-input-placeholder{
        font-size: .14rem;
        color: #3c3c40;
      }
    }
    .right-icon {
      width: .4rem;
      height: .28rem;
      text-align: center;
      color: white;
      font-size: .14rem;
      display: flex;
      align-items: center;
      justify-content: center;
      .login-text {
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
  
}

</style>

